'use client';

import React from 'react';

interface ShLogo4Props {
  size?: number;
  className?: string;
}

/**
 * Logo 4: 量子波动 - 代表前沿科技与量子计算
 * 风格：波形、量子、未来
 */
const ShLogo4: React.FC<ShLogo4Props> = ({ size = 40, className = '' }) => {
  return (
    <div className={`inline-flex items-center justify-center ${className}`} style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="logo4-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#6366F1" />
            <stop offset="50%" stopColor="#A855F7" />
            <stop offset="100%" stopColor="#EC4899" />
          </linearGradient>
        </defs>
        
        {/* 波形1 */}
        <path
          d="M 10 50 Q 25 30, 40 50 T 70 50 T 90 50"
          stroke="url(#logo4-gradient)"
          strokeWidth="3"
          fill="none"
          opacity="0.6"
        >
          <animate attributeName="d" 
            values="M 10 50 Q 25 30, 40 50 T 70 50 T 90 50;M 10 50 Q 25 70, 40 50 T 70 50 T 90 50;M 10 50 Q 25 30, 40 50 T 70 50 T 90 50" 
            dur="3s" 
            repeatCount="indefinite" 
          />
        </path>
        
        {/* 波形2 */}
        <path
          d="M 10 50 Q 30 70, 50 50 T 90 50"
          stroke="url(#logo4-gradient)"
          strokeWidth="3"
          fill="none"
          opacity="0.4"
        >
          <animate attributeName="d" 
            values="M 10 50 Q 30 70, 50 50 T 90 50;M 10 50 Q 30 30, 50 50 T 90 50;M 10 50 Q 30 70, 50 50 T 90 50" 
            dur="2.5s" 
            repeatCount="indefinite" 
          />
        </path>
        
        {/* 量子点 */}
        <circle cx="25" cy="50" r="4" fill="#6366F1">
          <animate attributeName="cy" values="30;70;30" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="50" cy="50" r="4" fill="#A855F7">
          <animate attributeName="cy" values="70;30;70" dur="2.5s" repeatCount="indefinite" />
        </circle>
        <circle cx="75" cy="50" r="4" fill="#EC4899">
          <animate attributeName="cy" values="30;70;30" dur="2.8s" repeatCount="indefinite" />
        </circle>
      </svg>
    </div>
  );
};

export default ShLogo4;

